Summary

This PR addresses and resolves the spacing and layout issue on the Profile Not Found error page, where the "Return Home" button was overlapping or appearing too compressed relative to the paragraph text above it. By introducing a structured Flexbox layout, responsive typography, and optimal margins to the .error-glass container and its descendants, the error page is now visually polished, balanced, and responsive across all screen sizes.

Closes #242

Type of Change

• Bug fix
• UI / Design change

What Changed

• apps/web/src/routes/u/[username]/+page.svelte:
  • Enabled Flexbox on the .error-glass class (flex-direction: column, align-items: center, justify-content: center) for proper vertical alignment of all elements.
  • Implemented responsive padding using clamp() (clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem)) for beautiful spacing on desktop and mobile.
  • Styled .error-emoji with responsive size (clamp(3rem, 7vw, 4.5rem)) and added a premium float micro-animation.
  • Configured responsive headers (.error-glass h1) and descriptions (.error-glass p) with proper line heights, colors, and margins.
  • Added a clean 1.75rem margin below the paragraph to ensure the "Return Home" button (.btn-primary) never overlaps with the text and has robust visual distinction.

How to Test

To verify the visual changes:

1. Start the web application locally:

   pnpm web